import { Helmet, useIntl, useLocation } from 'umi';

import img from '@/assets/advertisement.png';
import close from '@/assets/blue_close.png';
import Contact from '@/components/Contact';
import { findByCodeList } from '@/services/login';
import { jumpUrl, productList as list, useUrlParams } from '@/utils';
import { chooseOptions, creditTypeOptions, institutionTypeOptions, sortList } from '@/utils/common';
import { useRequest } from 'ahooks';
import { Card, Flex, Row, Select, Space } from 'antd';
import { orderBy } from 'lodash';
import { useEffect, useRef, useState } from 'react';
import ProductCard from '../Home/Card';
import '../Home/index.less';
import './index.less';

import APPImg from '@/components/AppImg';
import { getProductPageIndex } from '@/services/center';
const More: React.FC = () => {
  const intl = useIntl();
  const initType = useUrlParams('productType');
  const refType = useRef(initType);
  const type = refType.current;
  // const isEn = intl.locale == 'en-US';
  const { search } = useLocation();
  const year = new Date().getFullYear();
  const [sort, setSort] = useState<any>();
  const [visible, setVisible] = useState(true);
  const [params, setParams] = useState<Record<string, any>>({});
  const { data, loading, mutate, run } = useRequest(
    (params) => getProductPageIndex({ productType: type, ...params }),
    {
      manual: true,
    },
  );
  const productList = [
    {
      word: 'home.private',
      key: '1',
      background: 'linear-gradient(90deg, #07163E 0%, #152143 79.66%, #182444 100%)',

      des: intl.formatMessage({ id: 'home.more_private_word' }),
      info: intl.formatMessage({ id: 'home.more_private_word1' }, { year }),
    },
    {
      word: 'home.account',
      key: '2',
      des: intl.formatMessage({ id: 'home.more_account_word' }),
      info: intl.formatMessage({ id: 'home.more_account_word1' }),
      background: 'linear-gradient(90deg, #07163E 0%, #152143 79.66%, #182444 100%)',
    },
    {
      word: 'home.house',
      key: '3',
      des: intl.formatMessage({ id: 'home.more_master_word' }, { year }),
      info: intl.formatMessage({ id: 'home.more_master_word1' }),
      background: 'linear-gradient(90deg, #07163E 0%, #152143 79.66%, #182444 100%)',
    },
    {
      word: 'home.loan',
      key: '4',
      des: intl.formatMessage({ id: 'home.more_loan_word' }, { year }),
      info: intl.formatMessage({ id: 'home.more_loan_word1' }),
      background: 'linear-gradient(180deg, #100339 0%, #130543 43.5%, #17074E 100%)',
    },
    {
      word: 'home.company',
      key: '5',
      des: intl.formatMessage({ id: 'home.more_mid_word' }, { year }),
      info: intl.formatMessage({ id: 'home.more_mid_word1' }),
      background: 'linear-gradient(180deg, #100339 0%, #130543 43.5%, #17074E 100%)',
    },
  ];
  const { data: optionsList } = useRequest(() => {
    return findByCodeList({
      code: 'productKey,disburseAverageTime,productFeatureType,orderListStatus',
    });
  });
  const { word, des, info, background } = productList.find((item) => item.key == type) || {};
  const handleParamsChange = (value: any) => {
    const newVal = { ...params, ...value };
    setParams(newVal);
  };
  const resetParams = () => {
    setParams({});
    setSort(null);
  };
  useEffect(() => {
    if (type !== initType) {
      resetParams();
      refType.current = initType;
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [search]);
  useEffect(() => {
    run(params);
  }, [params, run]);
  const { institutionType, tuFlag, rebateParams } = params;

  // const wordList = ['home.way_free_word', 'home.way_free_word1'];
  return (
    <>
      <Helmet>
        <title>{intl.formatMessage({ id: 'home.meta_title' })}</title>
      </Helmet>
      <div className="home more">
        <div style={{ background }}>
          <div className="common">
            <div
              style={{
                display: 'flex',
                justifyContent: 'space-between',
                alignItems: 'center',
                gap: 10,
              }}
            >
              <div
                style={{
                  display: 'flex',
                  flexDirection: 'column',
                  justifyContent: 'center',
                  width: 880,
                  minHeight: 260,
                }}
              >
                <div
                  style={{
                    fontWeight: 700,
                    fontSize: 30,
                    lineHeight: '34px',
                    color: '#fff',
                  }}
                >
                  {intl.formatMessage({ id: word })}
                </div>
                <div
                  style={{ color: '#fff', margin: '24px 0 9px', fontSize: 25, lineHeight: '32px' }}
                >
                  {des}
                </div>
                <div style={{ lineHeight: '22px', fontSize: 16, color: '#e9e9e9' }}>{info}</div>
              </div>

              <img height={260} src={require(`@/assets/more_bg${type}.png`)} />
            </div>
          </div>
        </div>
        <Card
          style={{ padding: '0 0 190px', marginTop: 0 }}
          bordered={false}
          className="home_content"
        >
          <div className="common">
            {/* 卡片 */}
            <Flex gap={24} justify="space-between">
              <div style={{ width: 870 }}>
                <div style={{ fontSize: 20, lineHeight: '23px', color: '#0f294D' }}>
                  {intl.formatMessage(
                    { id: 'home.more_find' },
                    {
                      num: data?.data?.length,
                      type: intl.formatMessage({ id: word }).toLowerCase(),
                    },
                  )}
                </div>
                <Flex justify="space-between" style={{ margin: '24px 0 20px' }}>
                  <Flex gap={12}>
                    <Select
                      style={{ minWidth: 150 }}
                      allowClear
                      value={institutionType}
                      onChange={(value) => {
                        handleParamsChange({
                          institutionType: value,
                        });
                      }}
                      options={institutionTypeOptions}
                      placeholder={intl.formatMessage({ id: 'home.institution_type' })}
                    />
                    <Select
                      allowClear
                      style={{ minWidth: 150 }}
                      onChange={(value) => {
                        handleParamsChange({
                          tuFlag: value,
                        });
                      }}
                      value={tuFlag}
                      options={creditTypeOptions}
                      placeholder={intl.formatMessage({ id: 'home.credit_type' })}
                    />
                    <Select
                      allowClear
                      value={rebateParams}
                      style={{ minWidth: 150 }}
                      onChange={(value) => {
                        handleParamsChange({
                          rebateParams: value,
                        });
                      }}
                      options={chooseOptions}
                      placeholder={intl.formatMessage({ id: 'home.cash' })}
                    />
                  </Flex>

                  <div>
                    <Select
                      placeholder={intl.formatMessage({ id: 'home.more_way' })}
                      style={{ minWidth: 150 }}
                      allowClear
                      onChange={(value) => {
                        if ([1, 3].includes(value)) {
                          const type = value == 1 ? 'loanAmountMax' : 'yearInterestMin';
                          mutate({ data: orderBy(data?.data, [type], ['asc']) } as any);
                        } else {
                          const type = value == 2 ? 'loanAmountMax' : 'yearInterestMin';
                          mutate({ data: orderBy(data?.data, [type], ['desc']) } as any);
                        }
                        setSort(value);
                      }}
                      value={sort}
                      options={sortList}
                    />
                  </div>
                </Flex>
                <Card
                  loading={loading}
                  bordered={false}
                  style={{
                    boxShadow: 'none',
                  }}
                  styles={{
                    body: {
                      padding: 0,
                      borderRadius: 0,
                    },
                  }}
                >
                  <Row
                    gutter={[0, 25]}
                    style={{
                      position: 'relative',
                      zIndex: 2,
                      backgroundColor: '#fff',
                    }}
                  >
                    {((data && (data.data as Center.ProductList[])) || [])?.map(
                      (item: Center.ProductList, index: number) => {
                        return (
                          <ProductCard
                            mutate={mutate}
                            index={index}
                            item={item}
                            data={data}
                            key={item.id}
                            codeList={optionsList?.data || {}}
                          />
                        );
                      },
                    )}
                  </Row>
                </Card>
              </div>
              {/* 右边 */}
              <div style={{ flex: 1 }}>
                <Contact />
                <div className="more_free_content" />
                {/* <div className="more_free_content_top">
                    <Flex justify="space-between">
                      <div className="more_free_content_top_title">
                        {intl.formatMessage({ id: 'home.way_free' })}
                      </div>
                      <img width={90} src={free} />
                    </Flex>
                  </div>
                  <div className="more_free_content_info">
                    {wordList.map((item) => {
                      return (
                        <div
                          style={{ textIndent: isEn ? 0 : '25px' }}
                          key={item}
                          className="more_free_content_info_bg"
                        >
                          {intl.formatMessage({ id: item })}
                        </div>
                      );
                    })}
                  </div>
                </div> */}
                <div className="more_free_content_type">
                  <div className="more_free_content_type_word">
                    {intl.formatMessage({ id: 'home.relation_type' })}
                  </div>

                  {list
                    .filter((item) => item.key != type)
                    .map((item) => {
                      const { key, word, icon } = item;
                      return (
                        <Flex
                          className="more_free_content_type_item"
                          key={key}
                          gap={13}
                          align="center"
                          onClick={() => {
                            jumpUrl(`/more?productType=${key}`);
                            resetParams();
                          }}
                        >
                          <img width={20} height={20} src={icon} />
                          <div>{intl.formatMessage({ id: word })}</div>
                        </Flex>
                      );
                    })}
                </div>
                {visible ? (
                  <div
                    style={{
                      marginBottom: 40,
                      boxShadow: '0px 0px 8px 6px #E3E3E399',
                      position: 'relative',
                      borderRadius: 12,
                    }}
                  >
                    <img style={{ cursor: 'pointer' }} src={img} width={'100%'} />
                    <div
                      style={{
                        position: 'absolute',
                        right: 0,
                        top: 0,
                        fontSize: 10,
                        lineHeight: '11px',
                        color: '#123ba4',
                        padding: '7px 4px',
                        borderTopRightRadius: 12,
                        backgroundColor: '#fff',
                      }}
                    >
                      <Space
                        style={{ cursor: 'pointer' }}
                        onClick={() => {
                          setVisible(false);
                        }}
                        size={5}
                        align="center"
                      >
                        {intl.formatMessage({ id: 'home.advertisement' })}
                        <img src={close} width={4} height={4.5} />
                      </Space>
                    </div>
                  </div>
                ) : null}
                <APPImg />
              </div>
            </Flex>
          </div>
        </Card>
      </div>
    </>
  );
};

export default More;
